<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0,maximum-scale=1.0"/>
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/style.css"/>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="__PUBLIC__/js/public.js" type="text/javascript" charset="utf-8"></script>
    <title>我的-优惠券</title>
</head>
<body>
<div id="coupon">
    <div class="couponBar">
        <a href="javascript:void(0);" id="noUse" class="on">未使用</a>
        <a href="javascript:void(0);" id="used">已使用</a>
        <a href="javascript:void(0);" id="expired">已过期</a>
    </div>
    <div class="couponCon">
        <div class="couponList">
            <img class="bg" src="__PUBLIC__/images/bg_youhuijuan@2x.png"/>
            <div class="listCon">
                <div class="priceCon">
                    <span class="listPrice">￥<i class="price">5</i>店铺优惠券</span>
                    <span class="use">满<span class="num">100</span>元使用</span>
                </div>
                <div class="listTime"><i class="icon"></i>有效期<span class="term">2018.09.20-12.31</span></div>
                <span class="receive">立即使用</span>
            </div>
        </div>
        <div class="couponList">
            <img class="bg" src="__PUBLIC__/images/bg_youhuijuan@2x.png"/>
            <div class="listCon">
                <div class="priceCon">
                    <span class="listPrice">￥<i class="price">10</i>店铺优惠券</span>
                    <span class="use">满<span class="num">100</span>元使用</span>
                </div>
                <div class="listTime"><i class="icon"></i>有效期<span class="term">2018.09.20-12.31</span></div>
                <span class="receive">立即使用</span>
            </div>
        </div>
        <div class="couponList">
            <img class="bg" src="__PUBLIC__/images/bg_youhuijuan@2x.png"/>
            <div class="listCon">
                <div class="priceCon">
                    <span class="listPrice">￥<i class="price">20</i>店铺优惠券</span>
                    <span class="use">满<span class="num">100</span>元使用</span>
                </div>
                <div class="listTime"><i class="icon"></i>有效期<span class="term">2018.09.20-12.31</span></div>
                <span class="receive">立即使用</span>
            </div>
        </div>
        <div class="couponList">
            <img class="bg" src="__PUBLIC__/images/bg_youhuijuan@2x.png"/>
            <div class="listCon">
                <div class="priceCon">
                    <span class="listPrice">￥<i class="price">30</i>店铺优惠券</span>
                    <span class="use">满<span class="num">100</span>元使用</span>
                </div>
                <div class="listTime"><i class="icon"></i>有效期<span class="term">2018.09.20-12.31</span></div>
                <span class="receive">立即使用</span>
            </div>
        </div>
    </div>
    <div class="couponCon used" style="display: none;">
        <div class="couponList">
            <img class="bg" src="__PUBLIC__/images/yishiyong_youhuijuan_bg@2x.png"/>
            <div class="listCon">
                <div class="priceCon">
                    <span class="listPrice">￥<i class="price">5</i>店铺优惠券</span>
                    <span class="use">满<span class="num">100</span>元使用</span>
                </div>
                <div class="listTime"><i class="icon"></i>有效期<span class="term">2018.09.20-12.31</span></div>
                <span class="receive">已经使用</span>
            </div>
        </div>
        <div class="couponList">
            <img class="bg" src="__PUBLIC__/images/yishiyong_youhuijuan_bg@2x.png"/>
            <div class="listCon">
                <div class="priceCon">
                    <span class="listPrice">￥<i class="price">10</i>店铺优惠券</span>
                    <span class="use">满<span class="num">100</span>元使用</span>
                </div>
                <div class="listTime"><i class="icon"></i>有效期<span class="term">2018.09.20-12.31</span></div>
                <span class="receive">已经使用</span>
            </div>
        </div>
        <div class="couponList">
            <img class="bg" src="__PUBLIC__/images/yishiyong_youhuijuan_bg@2x.png"/>
            <div class="listCon">
                <div class="priceCon">
                    <span class="listPrice">￥<i class="price">20</i>店铺优惠券</span>
                    <span class="use">满<span class="num">100</span>元使用</span>
                </div>
                <div class="listTime"><i class="icon"></i>有效期<span class="term">2018.09.20-12.31</span></div>
                <span class="receive">已经使用</span>
            </div>
        </div>
        <div class="couponList">
            <img class="bg" src="__PUBLIC__/images/yishiyong_youhuijuan_bg@2x.png"/>
            <div class="listCon">
                <div class="priceCon">
                    <span class="listPrice">￥<i class="price">30</i>店铺优惠券</span>
                    <span class="use">满<span class="num">100</span>元使用</span>
                </div>
                <div class="listTime"><i class="icon"></i>有效期<span class="term">2018.09.20-12.31</span></div>
                <span class="receive">已经使用</span>
            </div>
        </div>
    </div>
    <div class="couponCon expired" style="display: none;">
        <div class="couponList">
            <img class="bg" src="__PUBLIC__/images/yishiyong_youhuijuan_bg@2x.png"/>
            <div class="listCon">
                <div class="priceCon">
                    <span class="listPrice">￥<i class="price">5</i>店铺优惠券</span>
                    <span class="use">满<span class="num">100</span>元使用</span>
                </div>
                <div class="listTime"><i class="icon"></i>有效期<span class="term">2018.09.20-12.31</span></div>
                <span class="receive">已经过期</span>
            </div>
        </div>
        <div class="couponList">
            <img class="bg" src="__PUBLIC__/images/yishiyong_youhuijuan_bg@2x.png"/>
            <div class="listCon">
                <div class="priceCon">
                    <span class="listPrice">￥<i class="price">10</i>店铺优惠券</span>
                    <span class="use">满<span class="num">100</span>元使用</span>
                </div>
                <div class="listTime"><i class="icon"></i>有效期<span class="term">2018.09.20-12.31</span></div>
                <span class="receive">已经过期</span>
            </div>
        </div>
        <div class="couponList">
            <img class="bg" src="__PUBLIC__/images/yishiyong_youhuijuan_bg@2x.png"/>
            <div class="listCon">
                <div class="priceCon">
                    <span class="listPrice">￥<i class="price">20</i>店铺优惠券</span>
                    <span class="use">满<span class="num">100</span>元使用</span>
                </div>
                <div class="listTime"><i class="icon"></i>有效期<span class="term">2018.09.20-12.31</span></div>
                <span class="receive">已经过期</span>
            </div>
        </div>
        <div class="couponList">
            <img class="bg" src="__PUBLIC__/images/yishiyong_youhuijuan_bg@2x.png"/>
            <div class="listCon">
                <div class="priceCon">
                    <span class="listPrice">￥<i class="price">30</i>店铺优惠券</span>
                    <span class="use">满<span class="num">100</span>元使用</span>
                </div>
                <div class="listTime"><i class="icon"></i>有效期<span class="term">2018.09.20-12.31</span></div>
                <span class="receive">已经过期</span>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $('.couponBar a').on('click', function () {
        var index = $(this).index();
        $(this).addClass('on').siblings().removeClass('on')
        $('#coupon .couponCon').eq(index).show().siblings('.couponCon').hide()
    })
</script>
</body>
</html>